Kanboard (kanboard.org) ist eine funktionsreiche Software zum agilen Projektmanagement. Sie ist quelloffen (Code bei GitHub) und kann auf einfachem Webspace selbst installiert und betrieben werden. Entwickler Frédéric Guillot pflegt die Software aktiv und verzichtet bei der Benutzeroberfläche auf unnötige Schnörkel. Um sie nicht zu überfrachten, hat er einzelne Text-Elemente heller dargestellt. Das ist zwar nachvollziehbar, doch wenn es um Barrierefreiheit geht, muss der Kontrast verbessert werden. Die nachfolgenden Anleitung hilft:
Erfolgskriterien der WCAG zum Text-Kontrast
Das Erfolgskriterium „1.4.3 Kontrast (Minimum)“ gehört zur Konformitätsstufe AA der WCAG und gilt daher für alle Websites der öffentlichen Verwaltungen in Europa. Das Kriterium ist erfüllt, wenn
- für jedes Element mit einer festgelegten Vordergrundfarbe auch eine Hintergrundfarbe festgelegt ist.
- Text und Bilder mit Text ein Kontrastverhältnis von mindestens 4.5:1 zum Hintergrund aufweisen.
- Großer Text ein Kontrastverhältnis von mindestens 3:1 zum Hintergrund aufweist. Als großer Text gilt Text mit mindestens 18 Punkt-Schrift (in der Regel 24px). Oder 14 Punkt-Schrift (in der Regel 18.7px), wenn sie fett gesetzt ist.
Die WCAG kennt noch ein strengeres Erfolgskriterium: „1.4.6 Contrast (Enhanced)“ . Es gehört zur Konformitätsstufe AAA und muss daher von Websites der öffentlichen Verwaltungen in Europa nicht erfüllt werden. Das Kontrastverhältnis für normalen Text muss hier mindestens 7:1 sein und 4.5:1 für großen Text.
CSS von Kanboard ergänzen
Kanboard macht es uns einfach, sein CSS zu ergänzen. Als Admin wechseln Sie zu "Einstellungen": "Anwendungskonfiguration". Hier gibt es das Textfeld „benutzerdefiniertes Stylesheet“. Ist Ihr Kanboard noch auf Englisch eingestellt, gehen Sie zu "Settings": "Application settings" und „Custom Stylesheet“. Kopieren Sie die nachfolgenden CSS-Definitionen in das Feld und speichern Sie die Angaben.
body {
background: #FFF;
color: #222;
}
/* Navigationsspalte links */
.sidebar ul li a {
background: #FFF;
color: #369;
}
/* blaue Schaltflächen */
.btn-blue {
border-color: #248;
background: #248;
}
.btn-blue:hover, .btn-blue:focus {
border-color: #248;
background: #FFF;
color: #248;
text-decoration: underline;
}
/* Text in Suchfeld */
.input-addon-field {
color: #222;
}
/* Swimmlane Aufgabenzähler */
.board-column-header-task-count {
color: #222;
}
/* Karte: Icons, Zähler, Priorität */
.task-board-icons span {
opacity: 1;
}
Damit fangen Sie nicht alle Kontrastfehler ab, doch es ist ein guter Ausgangspunkt für eigene Experimente und Verbesserungen.